<template>
  <div>
    <el-card :body-style="{ padding: '15px' }">
      <el-tabs
        tab-position="top"
        style="height: 840px"
        @tab-click="handleClick"
        class="demo-tabs"
      >
        <el-tab-pane label="网络设置">
          <network-settings v-if="index === '0'" />
        </el-tab-pane>
        <el-tab-pane label="数据清理设置">
          <clean-data-settings v-if="index === '1'" />
        </el-tab-pane>
        <el-tab-pane label="云存储设置"
          ><cloud-storag v-if="index === '2'"
        /></el-tab-pane>
        <el-tab-pane label="HTTP推送设置"
          ><push-settings v-if="index === '3'"
        /></el-tab-pane>
        <el-tab-pane label="消息接收设置"
          ><message-settings v-if="index === '4'"
        /></el-tab-pane>
        <el-tab-pane label="系统维护"
          ><system-settings v-if="index === '5'"
        /></el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import networkSettings from "./components/networkSettings.vue";
import cleanDataSettings from "./components/cleanDataSettings.vue";
import cloudStorag from "./components/cloudStorag.vue";
import pushSettings from "./components/pushSettings.vue";
import messageSettings from "./components/messageSettings.vue";
import systemSettings from "./components/systemSettings.vue";
import type { TabsPaneContext } from "element-plus";
import { ref } from "vue";
const index = ref<string>("0");
const handleClick = (tab: TabsPaneContext) => {
  index.value = tab.index;
};
</script>
